<template>
  <div class="app-container">
    <div class="filter-container add1">
      <el-form style>
        <el-form-item>
          <!-- 按钮级别的控制,使用hasPerm来判断是否应该有添加这个按钮 -->
          <el-button type="primary" icon="plus" @click="showProductCreate" v-if="hasPerm('product_order:add')">新建生产订单</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="searchWord">
      <el-input v-model="searchProduct" placeholder="请输入搜索内容" @input="productGeneralFun()"></el-input>
    </div>

    <br>
    <el-table class="tabless" :data="productList" v-loading.body="productListLoading" element-loading-text="拼命加载中"
      border fit highlight-current-row :row-class-name="tableRowClassName" @selection-change="handleProductSelectionChange">
      <el-table-column type="selection" width="55" fixed="left"></el-table-column>
      <el-table-column align="center" label="序号" width="80" fixed="left">
        <template slot-scope="scope">
          <span v-text="getIndex(scope.$index)"></span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="product_order_id" label="生产订单编号" style="width: 60px;" fixed="left"></el-table-column>
      <el-table-column align="center" prop="sales_son_order_id" label="销售子订单编号" style="width: 60px;" fixed="left"></el-table-column>
      <el-table-column align="center" prop="order_status" label="订单状态" style="width: 60px;"></el-table-column>
      <el-table-column align="center" prop="product_type" label="生产类型" style="width: 60px;"></el-table-column>
      <el-table-column align="center" prop="sc_item_name" label="基因名称" style="width: 60px;"></el-table-column>
      <el-table-column align="center" prop="item_numbers" label="数量" style="width: 60px;"></el-table-column>
      <el-table-column align="center" prop="item_unit" label="单位" style="width: 60px;"></el-table-column>
      <el-table-column align="center" prop="synthetic_specification" label="合成规格" style="width: 60px;"></el-table-column>
      <el-table-column align="center" prop="num_divided_tubes" label="分装管数" style="width: 60px;"></el-table-column>
      <el-table-column align="center" prop="sense" label="Sense" style="width: 60px;"></el-table-column>
      <el-table-column align="center" prop="antisense" label="AntiSense" style="width: 60px;"></el-table-column>
      <el-table-column align="center" prop="chemical_modification" label="化学修饰" style="width: 60px;"></el-table-column>
      <el-table-column align="center" prop="special_modification" label="特殊修饰" style="width: 60px;"></el-table-column>
      <el-table-column align="center" prop="fluorescent_labeling" label="荧光标记" style="width: 60px;"></el-table-column>
      <el-table-column align="center" prop="special_instructions" label="特殊说明" style="width: 60px;"></el-table-column>
      <el-table-column align="center" prop="create_time" label="创建时间" style="width: 60px;"></el-table-column>
      <el-table-column align="center" prop="create_staff_id" label="创建人" style="width: 60px;"></el-table-column>

      <el-table-column align="center" label="操作" width="550" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="showProductDetails(scope.$index)">查看详情</el-button>
          <el-button size="mini" type="primary" @click="showProductUpdate(scope.$index)">修改</el-button>
          <el-button size="mini" type="danger" @click="handleProductDelete(scope.$index, scope.row)">删除</el-button>
          <el-button size="mini" type="primary" @click="showAudit(scope.$index)">审核</el-button>
          <el-button size="mini" type="primary" @click="cancelProduct(scope.$index)">取消生产</el-button>
          <el-button size="mini" type="primary" @click="showComplete(scope.$index)">完成生产</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="productListQuery.pageNum"
      :page-size="productListQuery.pageRow"
      :total="productTotalCount"
      :page-sizes="[5, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      class="pagination">
    </el-pagination>

    <!-- 删除提示框 -->
    <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
      <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delVisible = false">取 消</el-button>
        <el-button type="primary" @click="deleteProductRow">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 批量删除提示框 -->
    <el-dialog title="提示" :visible.sync="delVisibleByBatch" width="300px" center>
      <div class="del-dialog-cnt">删除不可恢复，是否确定批量删除？</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delVisibleByBatch = false">取 消</el-button>
        <el-button type="primary" @click="delAllProduct">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 详情提示框 -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogVisible" width="70%">
      <el-form class="small-space" :model="tempProduct" label-position="right" label-width="90px" style="width: 100%; margin-left:0px;">
        
        <el-card class="box-card" v-if="dialogStatus=='detail'">
          <el-row>
            <el-col :span="9">
              <el-form-item label="客户名称">
                <el-input type="text" v-model="tempProduct.client_name" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="9" style="margin-left:0px;">
              <el-form-item label="订单编号">
                <el-input type="text" v-model="tempProduct.mord_id" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="订单日期">
                <el-input type="text" v-model="tempProduct.mord_create_time" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7" style="margin-left:10px;">
              <el-form-item label="应交货日期">
                <el-input type="text" v-model="tempProduct.delivery_time" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <el-card class="box-card">
          <el-row>
            <el-col :span="11">
              <el-form-item label="生产类型">
                <el-select v-model="tempProduct.product_type" placeholder="请选择" :disabled="dialogStatus=='detail'">
                  <el-option v-for="item in productTypes" :key="item.value" :label="item.value" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="7" style="margin-left:0px;">
              <el-form-item label="数量">
                <el-input type="number" v-model="tempProduct.item_numbers" :disabled="dialogStatus=='detail'"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" style="margin-left:0px;">
              <el-form-item label="单位">
                <el-input type="text" v-model="tempProduct.item_unit" :disabled="dialogStatus=='detail'"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <el-form-item label="基因名称">
                <el-select v-model="tempProduct.sc_item_id" placeholder="请选择" :disabled="dialogStatus=='detail'">
                  <el-option v-for="item in scItemList" :key="item.sc_item_id" :label="item.sc_item_name" :value="item.sc_item_id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="7" style="margin-left:0px;">
              <el-form-item label="合成规格">
                <el-input type="text" v-model="tempProduct.synthetic_specification" :disabled="dialogStatus=='detail'"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" style="margin-left:0px;">
              <el-form-item label="分装管数">
                <el-input type="text" v-model="tempProduct.num_divided_tubes" :disabled="dialogStatus=='detail'"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="Sense">
            <el-input type="text" v-model="tempProduct.sense" :disabled="dialogStatus=='detail'"></el-input>
          </el-form-item>
          <el-form-item label="Antisense">
            <el-input type="text" v-model="tempProduct.antisense" :disabled="dialogStatus=='detail'"></el-input>
          </el-form-item>
          <el-form-item label="化学修饰">
            <el-input type="text" v-model="tempProduct.chemical_modification" :disabled="dialogStatus=='detail'"></el-input>
          </el-form-item>
          <el-form-item label="特殊修饰">
            <el-input type="text" v-model="tempProduct.special_modification" :disabled="dialogStatus=='detail'"></el-input>
          </el-form-item>
          <el-form-item label="特殊说明">
            <el-input type="text" v-model="tempProduct.special_instructions" :disabled="dialogStatus=='detail'"></el-input>
          </el-form-item>
          <el-form-item label="荧光标记">
            <el-input type="text" v-model="tempProduct.fluorescent_labeling" :disabled="dialogStatus=='detail'"></el-input>
          </el-form-item>
        </el-card>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-if="dialogStatus=='create' | dialogStatus=='update'" @click="dialogVisible = false">取 消</el-button>
        <el-button type="success" v-if="dialogStatus=='detail'" @click="dialogVisible = false">确 定</el-button>
        <el-button type="success" v-if="dialogStatus=='create'" @click="createProduct">创 建</el-button>
        <el-button type="primary" v-if="dialogStatus=='update'" @click="updateProduct">修 改</el-button>
      </div>
    </el-dialog>

    <!-- 审核提示框 -->
    <el-dialog :title="'审核'" :visible.sync="dialogAuditVisible" width="30%" @close="dialogAuditVisible = false">
        <el-radio v-model="tempAudit.decision" label="agree">同意</el-radio>
        <el-radio v-model="tempAudit.decision" label="regret">拒绝</el-radio>
        <br><br> 理由：
        <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="tempAudit.reason">
        </el-input>
        <span slot="footer">
            <el-button @click="dialogAuditVisible = false">取 消</el-button>
            <el-button type="primary" @click="auditProduct">确 定</el-button>
        </span>
    </el-dialog>

    <!-- 完成提示框 -->
    <el-dialog :title="'生产完成'" :visible.sync="dialogCompleteVisible" width="30%" @close="dialogCompleteVisible = false">
        经检测，您已经完成了生产，请点击确定进行确认！
        <span slot="footer">
            <el-button type="primary" @click="completeProduct">确 定</el-button>
        </span>
    </el-dialog>

    <!-- 入库提示框 -->
    <el-dialog :title="'生产完成'" :visible.sync="dialogStoreVisible" width="30%" @close="dialogStoreVisible = false">
        经过系统检测，您已经生产了 {{tempProduct.item_numbers}} 件【{{tempProduct.sc_item_name}}】产品，是否要入库？
        <span slot="footer">
            <el-button @click="dialogStoreVisible = false">否</el-button>
            <el-button type="primary" @click="storeProduct">是</el-button>
        </span>
    </el-dialog>

  </div>
</template>
<script>
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
  data() {
    return {
      productTotalCount: 0, //分页组件--数据总条数
      productList: [], //表格的数据
      scItemList: [], //下拉选择货品
      productListLoading: false, //数据加载等待动画
      productListQuery: {
        pageNum: 1, //页码
        pageRow: 5, //每页条数
        value: ""
      },
      dialogStatus: "create",
      dialogVisible: false,
      dialogAuditVisible: false,
      dialogCompleteVisible: false,
      dialogStoreVisible: false,
      delVisible: false, //删除提示弹框的状态
      delVisibleByBatch: false, //批量删除提示弹框的状态
      // 详情提示框的状态和标题
      textMap: {
        create: "直接创建生产订单",
        update: "修改生产订单",
        detail: "苏州吉玛基因股份有限公司生产清单",
      },
      tempProduct: {
        client_name: "",
        mord_id: "",
        mord_create_time: "",
        delivery_time: "",
        product_order_id: "",
        sales_son_order_id: "",
        order_status: "",
        product_type: "",
        sc_item_id: "",
        sc_item_name: "",
        synthetic_specification: "",
        num_divided_tubes: "",
        sense: "",
        antisense: "",
        chemical_modification: "",
        special_modification: "",
        fluorescent_labeling: "",
        special_instructions: "",
        produccreate_timet_type: "",
        create_staff_id: "",
        item_numbers: "",
        item_unit: "",
      },
      productTypes: [
        {value: '单链',},
        {value: '双链',},
        {value: '其它',},
      ],
      tempAudit:{
        order_id: 0,
        product_order_id: 0,
        decision: 'agree',
        reason: '',
        order_status: '',
      },
      currentProductId: "",
      delProductIndex: -1, 
      productMultipleSelection: [], 
      searchProduct: "",
      // 记录导出得时候跳页的之前的页数
      temp_page: 3,
    };
  },
  computed: {},
  created() {
    this.getProductList();
    this.getScItemList();
  },
  methods: {

    //单行删除
    handleProductDelete(index, row) {
      this.delProductIndex = index;
      this.delVisible = true;
    },
    // 当批量删除的时候,如果要是没有选中,弹出提醒
    delWarnInfo() {
      this.$message("请选择您要删除的数据");
    },
    //批量删除
    delAllProduct() {
      var lengths = this.productMultipleSelection.length;

      for (let i = 0; i < lengths; i++) {
        this.api({
          url: "/products/deleteProduct",
          method: "post",
          data: this.productMultipleSelection[i]
        })
          .then(() => {
            this.productGeneralFun();
          })
          .catch(() => {
            this.$message.error("删除失败");
          });
      }
      this.delVisibleByBatch = false; //关闭删除提示模态框
    },

    // 确定删除
    deleteProductRow() {
      // 写自己的删除的对象
      let product = this.productList[this.delProductIndex];
      this.api({
        url: "/products/deleteProduct",
        method: "post",
        data: product
      })
        .then(() => {
          this.productGeneralFun();
        })
        .catch(error => {
          console.log(error);
          this.$message.error("删除失败");
        });
      this.delVisible = false; //关闭删除提示模态框
    },
    delProductSelect() {
      const length = this.productMultipleSelection.length;
      if (length == 0) {
        this.delWarnInfo();
      } else {
        this.delVisibleByBatch = true; //显示删除弹框
      }
    },
    handleProductSelectionChange(val) {
      this.productMultipleSelection = val;
      console.log("productMultipleSelection: ", this.productMultipleSelection);
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return "warning-row";
      } else if (rowIndex % 2 === 0) {
        // return 'success-row';
      }
      return "";
    },
    
    getScItemList() {
      this.api({
        url: "/products/listScItem",
        method: "get",
        params: this.productListQuery
      }).then(data => {
        this.scItemList = data.list;
      });
    },
    getProductList() {
      //查询列表
      if (!this.hasPerm('product_order:list')) {
        return;
      }
      this.productListLoading = true;
      this.api({
        url: "/products/listProducts",
        method: "get",
        params: this.productListQuery
      }).then(data => {
        console.log("getProductList:", data);
        this.productListLoading = false;
        this.productList = data.list;
        this.productTotalCount = data.totalCount;
      });
    },
    getProductListBySearch(val) {
      //查询列表
      if (!this.hasPerm('product_order:list')) {
        return;
      }
      this.productListLoading = true;
      this.productListQuery.value = val;
      this.api({
        url: "/products/listProductBySearch",
        method: "get",
        params: this.productListQuery
      }).then(data => {
        this.productListLoading = false;
        this.productList = data.list;
        this.productTotalCount = data.totalCount;
      });
    },

    handleSizeChange(val) {
      //改变每页数量
      this.productListQuery.pageRow = val;
      this.productGeneralFun();
    },
    handleCurrentChange(val) {
      //改变页码
      this.productListQuery.pageNum = val;
      this.productGeneralFun();
    },
    getIndex($index) {
      //表格序号
      return (this.productListQuery.pageNum - 1) * this.productListQuery.pageRow + $index + 1;
    },

    clearTempProduct() {
        this.tempProduct.client_name = "";
        this.tempProduct.mord_id = "";
        this.tempProduct.mord_create_time = "";
        this.tempProduct.delivery_time = "";
        this.tempProduct.product_order_id = "";
        this.tempProduct.sales_son_order_id = "";
        this.tempProduct.order_status = "";
        this.tempProduct.product_type = "";
        this.tempProduct.sc_item_id = "";
        this.tempProduct.sc_item_name = "";
        this.tempProduct.synthetic_specification = "";
        this.tempProduct.num_divided_tubes = "";
        this.tempProduct.sense = "";
        this.tempProduct.antisense = "";
        this.tempProduct.chemical_modification = "";
        this.tempProduct.special_modification = "";
        this.tempProduct.fluorescent_labeling = "";
        this.tempProduct.special_instructions = "";
        this.tempProduct.produccreate_timet_type = "";
        this.tempProduct.create_staff_id = "";
        this.tempProduct.item_numbers = "";
        this.tempProduct.item_unit = "";
    },
    showProductCreate() {
      //显示新增对话框
      this.clearTempProduct();
      this.dialogStatus = "create";
      this.dialogVisible = true;
    },
    createProduct() {
      this.tempProduct.create_staff_id = 0;
      this.api({
        url: "/products/addProduct",
        method: "post",
        data: this.tempProduct
      }).then(() => {
          this.productGeneralFun();
          this.dialogVisible = false;
      });
    },
    showProductDetails($index) {
      //显示详情对话框
      this.tempProduct = this.productList[$index];
      this.dialogStatus = "detail";
      this.dialogVisible = true;
    },
    showProductUpdate($index) {
      //显示修改对话框
      this.tempProduct = this.productList[$index];
      this.dialogStatus = "update";
      this.dialogVisible = true;
    },
    updateProduct() {
      this.api({
        url: "/products/updateProduct",
        method: "post",
        data: this.tempProduct
      }).then(() => {
          this.productGeneralFun();
          this.dialogVisible = false;
      });
    },

    productGeneralFun() {
      if (this.searchProduct) {
        this.getProductListBySearch(this.searchProduct);
      } else {
        this.getProductList();
      }
    },

    showAudit($index){
      this.tempAudit.order_id = this.productList[$index].sales_son_order_id;
      this.tempAudit.product_order_id = this.productList[$index].product_order_id;
      this.tempAudit.decision = "agree";
      this.tempAudit.reason = "";
      this.dialogAuditVisible = true;
    },
    auditProduct(){
      if (this.tempAudit.decision == "agree") {
        this.tempAudit.order_status = "生产中";
      } else if (this.tempAudit.decision == "regret") {
        this.tempAudit.order_status = "生产取消";
      }
      this.api({
          url: "/products/auditProduct",
          method: "post",
          data: this.tempAudit
      }).then(data => {
          if (this.tempAudit.decision == "agree") {
            alert("生产订单审核成功，已开始生产！");
          } else if (this.tempAudit.decision == "regret") {
            alert("生产订单拒绝成功，已取消生产！");
          }
          this.dialogAuditVisible = false;
          this.productGeneralFun();
      })
    },
    cancelProduct($index){
      this.tempAudit.order_id = this.productList[$index].sales_son_order_id;
      this.tempAudit.order_status = "生产取消";
      this.api({
          url: "/products/updateOrdersStatus",
          method: "post",
          data: this.tempAudit
      }).then(data => {
          alert("生产订单取消成功！");
          this.productGeneralFun();
      })
    },
    showComplete($index){
      this.tempProduct = this.productList[$index];
      this.tempAudit.order_id = this.productList[$index].sales_son_order_id;
      this.dialogCompleteVisible = true;
    },
    completeProduct(){
      this.tempAudit.order_status = "生产完成";
      this.api({
          url: "/products/updateOrdersStatus",
          method: "post",
          data: this.tempAudit
      }).then(data => {
      this.dialogCompleteVisible = false;
          this.dialogStoreVisible = true;
          this.productGeneralFun();
      })
    },
    storeProduct(){
      this.api({
          url: "/products/createEntry",
          method: "post",
          data: this.tempProduct
      }).then(data => {
        this.tempAudit.order_id = this.tempProduct.sales_son_order_id;
        this.tempAudit.order_status = "待入库";
        this.api({
            url: "/products/updateOrdersStatus",
            method: "post",
            data: this.tempAudit
        }).then(data => {
            this.dialogStoreVisible = false;
            alert("入库成功！");
            this.productGeneralFun();
        })
      })
    },

  }
};
</script>

<style>
.pagination {
  background-color: lavender;
  margin-right: 0%;
  text-align: right;
}

.searchWord .add1 {
  display: inline;
}
</style>